<!DOCTYPE html	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:sdu="http://sduept.com/jsf/cc">
<h:head>
	<link href="/css/primefaces/menubase.css" rel="stylesheet" type="text/css" />
	<title>专家选择器</title>
	<style type="text/css">
.value {
	font-weight: bold;
}
.ui-tree {
	width: 700px;
    position: relative;
    height: 600px;
    overflow-y: scroll;
}

</style>
</h:head>

<!-- 在页面中 -->
<!-- 
	<p:commandButton value="选择专家人员" style="margin-left:5px"
		actionListener="#{expertSelectorController.openExpertSelectorDialog}" >
		<p:ajax event="dialogReturn" listener="#{对应的controller中的方法.onExpertsChosen}" />
	</p:commandButton>
 -->


<!-- 在自己对应的controller中增加如下方法 -->
<!-- 
	public void onExpertsChosen(SelectEvent event) {
		List<InspectionExpert> experts = (List<InspectionExpert>) event.getObject();
	}
 -->

	<h:body>
		<h:form id="toolbarForm">
			<p:toolbar id="toolbar">
			    <f:facet name="left">
					<p:autoComplete placeholder="输入专家首字母可查" id="expert" size="18"
						value="#{expertSelectorController.expertName}"
						completeMethod="#{expertSelectorController.completeExperts}"
						scrollHeight="400" style="float:left;margin-top:5px;"
						 dropdown="true">
						<p:ajax  event="itemSelect" update =" :treeForm:expertTree  :toolbarForm:toolbar"
							listener="#{expertSelectorController.autoCompleteExpertTree}" />
					</p:autoComplete>
					<p:commandButton icon="fa fa-refresh"
						style="margin-left:5px;margin-top:5px;" value="重置"  
						  update=" :treeForm:expertTree  :toolbarForm:toolbar"
						 actionListener="#{expertSelectorController.refresh}"  />
				    <p:commandButton 
						style="margin-left:5px;margin-top:5px;" value="继续选择"  
						  update=" :treeForm:expertTree  :toolbarForm:toolbar"
						 actionListener="#{expertSelectorController.addChoice}"
						 rendered = "#{expertSelectorController.choiceStatus}"  />
				</f:facet>
				<f:facet name="right">
					<p:commandButton value="确定" style="margin-right:10px;"
						actionListener="#{expertSelectorController.selectStandards}"/>
				</f:facet>
			</p:toolbar>
		</h:form>
		<h:form id="treeForm">
			<p:tree id="expertTree" widgetVar="expertTree" dynamic="true" 
				animate="true" var="node" style="border:0"
				value="#{expertSelectorController.expertRoot}"
				selectionMode="checkbox" selection="#{expertSelectorController.selectedNodes}" >
				<p:ajax  event="unselect" listener = "#{expertSelectorController.unSelect}"></p:ajax>
				<p:ajax  event="select" listener = "#{expertSelectorController.select}"></p:ajax>
				<p:treeNode type="dept" icon="fa fa-home">
						<h:outputText value="#{node}" />
					</p:treeNode>
					<p:treeNode type="expert" icon="fa fa-user">
						<h:outputText value="#{node}" />
					</p:treeNode>
			</p:tree>
		</h:form>
	</h:body>
</html>
